<%- include("components/header", {type:'all'}) %>

<div id="fh5co-page">
	<div id="fh5co-main">
		<div class="posts">
			<% posts.forEach(function(res){ %>
				<div>
					<!-- <img class="userAvator" src="images/<%= res.avator %>" onerror="this.src='http://blog.wclimb.site/images/default.jpg'"> -->
					<div class="title"><a href="/posts/<%= res.id %>"><%- res.title %></a></div>
					<div class="msg">
						<span title="<%= res.name %>">作者: <%= res.name %></span>
						<span>评论数：<%= res.comments %></span>
						<span>浏览量：<%= res.pv %></span>
						<span>发表时间：<%= res.moment.substr(0, 10) %></span>
					</div>
					<div class="text-center toView"><a class="btn btn-primary" href="/posts/<%= res.id %>">阅读全文</a></div>
				</div>
			<% }) %>
		</div>
		<div style="margin-top: 30px" class="pagination" id="page"></div>
	</div>
</div>

<script>
	pagination({
		selector: '#page',
 		totalPage: '<%= postsPageLength %>',
		currentPage: 1,
		prev: '上一页',
		next: '下一页',
		first: true,
		last: true,
		showTotalPage: true,
		count: 2//当前页前后显示的数量
	},function(val){
		// 当前页
		$.ajax({
			url: "posts/page",
			type: 'POST',
			data:{
				page: val
			},
			cache: false,
			success: function (res) {
				if (res != 'error') {
					$('.posts').html(' ')
					$.each(res,function(i,val){
						$('.posts').append(
							'<div>'+
								'<div class=\"title\"><a href=\"/posts/'+ val.id +'\">'+ val.title +'</a></div>'+
								'<div class=\"msg\">' +
									'<span title="'+ val.name +'">作者: '+ val.name +'</span>' +
									'<span>评论数：'+ val.comments +'</span>' +
									'<span>浏览量：'+ val.pv +'</span>' +
									'<span>发表时间：'+ val.moment.substr(0, 10) +'</span>' +
								'</div>' +
								'<div class=\"text-center toView\">'+
									'<a class=\"btn btn-primary\" href=\"/posts/'+ val.id +'\">阅读全文</a>'+
								'</div>'+
							'</div>'
						);
					})
				}else{
					console.log('分页不存在');
				} 
			}
		})
	})
	/*//滚动加载数据，现在做成分页的
	// 初始化数据输出
	eachInit(postList)
	var page = 2,
		lock = true;
	// 无限加载 每次输出5条
	$(window).scroll(function(){
		if (window.innerHeight + document.documentElement.scrollTop + 50 > document.documentElement.scrollHeight && lock) {
			lock = false
			$.ajax({
				url:'/posts/page/'+page,
				type:'POST',
				success:function(res){
					$('.posts').html('')
					postList = postList.concat(res)
					eachInit(postList)
					page++
					lock = true;
					if (res.length == 0) {
						$('body').append('<p class="tips">没有了，再扯滚动条都要被你扯坏了→_→  !</p>')
						lock = false;
					}
				}
			})
		}	
	})
	function eachInit(arr){
		$.each(arr,function(i,val){
			document.querySelector('.posts').innerHTML += `
				<li>
					<div class="post_3">
						<p class="post_user"><a href="/posts?author=${val['name']} ">作者: ${val['name']}</a></p>
						<p class="post_comments">评论数：${val['comments']} </p>
						<p class="post_pv">浏览数：${val['pv']} %></p>
					</div>
					<a target="_blank" href="/posts/${val['id']}">
						<div class="post_title">
							<h3>title</h3>
							<p>${val['title']}</p>
						</div>
						<div class="post_content">
							<h3>content</h3>
							<p>${val['content']}</p>
						</div>
					</a>
					<!-- <p>userid:${val['uid']}</p> -->
					<p class="post_time">发表时间：${val['moment']}</p>
				</li>		`	
		})
	}*/
</script>
    
<%- include("components/footer") %>

    